<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $.ajax({
        //几个参数需要注意一下
        type: "GET",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "/score/getTotalScore",//url
        data: {},
        success: function (result) {
            if (result.code == "0") {
                var temData = result.data;
                console.log(temData);
                if (temData.length > 0) {
                    console.log(temData);
                    var dom = document.getElementById('container');
                    var myChart = echarts.init(dom, null, {
                        renderer: 'canvas',
                        useDirtyRect: false
                    });
                    var app = {};
                    var option;
                    // prettier-ignore
                    let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
                    // prettier-ignore
                    let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];

                    dataAxis = [];
                    data = [];
                    for (let i = 0; i < temData.length; i++) {
                        console.log(temData[i]);
                        dataAxis.push(temData[i].studentName);
                        data.push(temData[i].score);
                    }
                    console.log("dataAxis:" + dataAxis);
                    console.log("data:" + data);

                    let yMax = 500;
                    let dataShadow = [];
                    for (let i = 0; i < data.length; i++) {
                        dataShadow.push(yMax);
                    }
                    option = {
                        xAxis: {
                            data: dataAxis,
                            axisLabel: {
                                inside: true,
                                color: '#fff'
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            z: 10
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#999'
                            }
                        },
                        dataZoom: [
                            {
                                type: 'inside'
                            }
                        ],
                        series: [
                            {
                                type: 'bar',
                                showBackground: true,
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ])
                                },
                                emphasis: {
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ])
                                    }
                                },
                                data: data
                            }
                        ]
                    };
                    // Enable data zoom when user click bar.
                    const zoomSize = 6;
                    myChart.on('click', function (params) {
                        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                        myChart.dispatchAction({
                            type: 'dataZoom',
                            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                            endValue:
                                dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                        });
                    });

                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }

                    window.addEventListener('resize', myChart.resize);


                }
            }
        },
        error: function () {

        }
    });


</script>
</body>
</html>